<template>
  <div class="process-wrapper" ref="processCheck">
    <div class="process">
      <h2 class="title">核酸检测流程</h2>
      <ul class="process-list">
        <li>
          <i class="icon1"></i>
          <p>1.预约挂号</p>
        </li>
        <li>
          <i class="icon2"></i>
          <p>2.到院取号</p>
        </li>

        <li>
          <i class="icon3"></i>
          <p>3.开检查单</p>
          <p>自助缴费</p>
        </li>
        <li>
          <i class="icon4"></i>
          <p>4.采样</p>
        </li>
        <li>
          <i class="icon5"></i>
          <p>5.院内打印报告</p>
        </li>
      </ul>
    </div>
    <div class="tip">
      <p>
        <i class="el-icon-warning-outline"></i
        >有核酸检测需求的用户，请在以下医院及科室进行预约
      </p>
    </div>
    <div class="main-wrapper">
      <div class="search">
        <i class="icon"></i>
        <input
          type="text"
          name="search"
          v-model="searchValue"
          placeholder="点击输入医院名称"
          @focus="focusHandle"
          @blur="blurHandle"
          @input="changeInput()"
        />

        <button type="">搜索</button>
        <transition name="el-zoom-in-center">
          <div v-show="show" class="transition-box"></div>
        </transition>
      </div>
      <div class="region-wrapper">
        <div class="region">地区：</div>
        <ul class="region-list">
          <li :class="{ 'region-active': isActive }" @click="regionAllHandle">全部</li>
          <li
            :class="index == regionActive ? 'region-active' : ''"
            @click="regionHandle(index)"
            v-for="(item, index) in regionDate"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="hospital-wrapper" v-for="(item, index) in hospitalDate" :key="index">
        <h3 class="hospital-name"><i class="icon"></i> {{ item.name }}</h3>
        <span class="hospital-section" @click="goDetailSection(item.id)">{{ item.section }}</span>
      </div>
    </div>
    <div class="back-to-top" @click="goTop" v-show="goTopIsShow">
      <i class="el-icon-arrow-up"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: "nucleic-check",
  data() {
    return {
      show: false,
      goTopIsShow: false,
      searchValue: "",
      isActive: true,
      regionActive: -1,
      regionDate: [
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
        "东城区",
      ],
      hospitalDate: [
        {
          id:1,
          icon: "",
          name: "北京大学人民医院",
          section: "核酸检测门诊",
        },
        {
          id:2,
          icon: "",
          name: "北京大学人民医院",
          section: "核酸检测门诊",
        },
        {
          id:3,
          icon: "",
          name: "北京大学人民医院",
          section: "核酸检测门诊",
        },
        {
          id:4,
          icon: "",
          name: "北京大学人民医院",
          section: "核酸检测门诊",
        },
        {
          id:5,
          icon: "",
          name: "北京大学人民医院",
          section: "核酸检测门诊",
        },
      ],
    };
  },
  methods: {
    focusHandle() {
      this.show = true;
    },
    blurHandle() {
      this.show = false;
    },
    changeInput() {
      console.log(this.searchValue);
    },
    regionHandle(index) {
      this.isActive = false;
      this.regionActive = index;
    },
    regionAllHandle() {
      this.isActive = true;
      this.regionActive = -1;
    },
    listenerFunction(e) {
      document.addEventListener("scroll", this.handleScroll, true);
    },
    handleScroll(e) {
      if (e.target.scrollTop >= 300) {
        this.goTopIsShow = true;
      } else {
        this.goTopIsShow = false;
      }
    },
    goDetailSection(id) {
      if (this.$store.state.loginDate.userMobile === null) {
        this.$store.commit("loginHandleOpen");
      } else {
        console.log(id);
      }
    },
    goTop() {
      // console.log(this.$parent.$parent.$refs.content);
      let currentTop = this.$refs.processCheck.parentNode.parentNode.scrollTop;
      let that = this;
      let timer = setInterval(function () {
        let osTop = that.$refs.processCheck.parentNode.parentNode.scrollTop;
        let ispeed = Math.floor(-currentTop / 5);
        that.$refs.processCheck.parentNode.parentNode.scrollTop = osTop + ispeed;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    },
  },
  created() {
    this.listenerFunction();
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.listenerFunction);
  },
};
</script>
<style lang="scss" scoped>
.process-wrapper {
  width: 1200px;
  margin: 0 auto;
  .process {
    width: 100%;
    height: 235px;
    background: #f7fbff;
    text-align: center;
    .title {
      letter-spacing: 1px;
      font-weight: 700;
      color: #333;
      font-size: 16px;
      padding: 35px 0;
      vertical-align: middle;
    }
    .title::after {
      display: inline-block;
      content: "";
      width: 20px;
      height: 1px;
      background-image: linear-gradient(to right, #316eff, #a6c1ff);
      margin-left: 13px;
      vertical-align: middle;
    }
    .title::before {
      display: inline-block;
      content: "";
      width: 20px;
      height: 1px;
      background-image: linear-gradient(to left, #316eff, #a6c1ff);
      margin-right: 13px;
      vertical-align: middle;
    }
    .process-list {
      display: flex;
      padding: 10px 220px;
      font-size: 14px;
      color: #666;
      i {
        display: inline-block;
        width: 45px;
        height: 45px;
        margin-bottom: 6px;
      }
      .icon1 {
        background: url("../../assets/covid_test/nucleic-book-no.png") no-repeat center;
        background-size: cover;
      }
      .icon2 {
        background: url("../../assets/covid_test/nucleic-get-no.png") no-repeat center;
        background-size: cover;
      }
      .icon3 {
        background: url("../../assets/covid_test/nucleic-pay.png") no-repeat center;
        background-size: cover;
      }
      .icon4 {
        background: url("../../assets/covid_test/nucleic-sample.png") no-repeat center;
        background-size: cover;
      }
      .icon5 {
        background: url("../../assets/covid_test/nucleic-search-report.png") no-repeat
          center;
        background-size: cover;
      }
      li {
        flex: 1;
      }
    }
  }
  .tip {
    text-align: center;
    width: 100%;
    margin-top: 22px;
    p {
      display: inline-block;
      font-size: 14px;
      color: #f7b62f;
      height: 38px;
      line-height: 38px;
      background: #fff9e5;
      padding: 0 28px;
      border-radius: 19px;
    }
    i {
      margin-right: 10px;
    }
  }

  .main-wrapper {
    width: 920px;
    margin: 0 auto;
    .search {
      margin-top: 20px;
      display: inline-block;
      width: 100%;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #eeeeee;
      .icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background: url("../../assets/helpcenter/fangda.png") no-repeat center;
        vertical-align: middle;
      }
      input {
        border: none;
        width: 800px;
        font-size: 16px;
      }
      button {
        font-size: 16px;

        border: none;
        background: none;
        color: #4490f3;
        font-weight: bold;
        cursor: pointer;
      }
      button:hover {
        color: #71adff;
      }
      .transition-box {
        width: 100%;
        height: 1px;
        background-color: #4a90f1;
        box-sizing: border-box;
      }
      /deep/.el-zoom-in-center-enter-active,
      .el-zoom-in-center-leave-active {
        transition: all 0.3s ease-out;
      }
      /deep/.el-zoom-in-center-enter,
      .el-zoom-in-center-leave-active {
        opacity: 1;
        transform: scaleX(0);
      }
    }
    .region-wrapper {
      margin-top: 38px;
      width: 100%;
      display: flex;
      font-size: 14px;
      .region {
        line-height: 30px;
        color: #999999;
      }
      .region-list {
        flex: 1;
        color: #666;
        line-height: 28px;
        display: flex;
        flex-wrap: wrap;
        li {
          padding: 0 15px;
          cursor: pointer;
        }
        li:hover {
          color: #4490f1;
        }
        .region-active {
          color: #4490f1;
          font-weight: bold;
        }
      }
    }
    .hospital-wrapper {
      margin-top: 30px;
      width: 100%;
      box-shadow: 0 0 5px #ddd;
      padding: 0 20px;
      .hospital-name {
        color: #333333;
        line-height: 70px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
      }
      .hospital-section {
        cursor:pointer;
        display: inline-block;
        color: #4990f1;
        font-size: 14px;
        padding: 6px 10px;
        background: #f7fbff;
        border-radius: 3px;
        margin: 20px 0;
      }
    }
  }
  .back-to-top {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 5px #ddd;
    position: fixed;
    bottom: 90px;
    right: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    i {
      color: #40a0ff;
      font-size: 18px;
    }
  }
  .back-to-top:hover {
    background: #f2f6fc;
  }
}
</style>
